<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <PageTools>
            <!-- 插入到left插槽位置 -->
            <template #left>
              <span>总记录数：100条</span>
            </template>
            <!-- 插入到right插槽位置 -->
            <template #right>
              <el-button
                type="warning"
                size="small"
                @click="$router.push('/import')"
                >导入excel</el-button
              >
              <el-button
                :loading="downloadLoading"
                type="danger"
                size="small"
                @click="exportDate"
                >导出excel</el-button
              >
              <el-button type="primary" size="small" @click="show = true"
                >新增员工</el-button
              >
            </template>
          </PageTools>
        </div>
        <div>
          <!-- table列表 -->

          <el-table
            border
            :data="list"
            :default-sort="{ prop: 'workNumber', order: 'descending' }"
          >
            <el-table-column type="index" label="序号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column label="头像" prop="staffPhoto">
              <template slot-scope="scope">
                <img
                  class="staff"
                  :src="scope.row.staffPhoto"
                  @click="openDraw(scope.row.staffPhoto)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column prop="formOfEmployment" label="聘用形式">
              <template #default="{ row }">
                {{ formatEmployment(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column prop="timeOfEntry" label="入职时间" sortable>
              <template #default="{ row }">
                {{ formatDate(row.timeOfEntry) }}
              </template>
            </el-table-column>
            <el-table-column label="账户状态">
              <el-switch v-model="qy" />
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{ row }">
                <el-button
                  @click="$router.push(`/employees/detail/${row.id}`)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button type="text" size="small" @click="openAssign(row.id)"
                  >分配角色</el-button
                >
                <el-button type="text" size="small" @click="delFn(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              :total="total"
              :current-page="params.page"
              :page-size="params.size"
              :page-sizes="[10, 2]"
              layout="prev, pager, next, sizes"
              @current-change="changePage"
              @size-change="sizeChange"
            />
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 子传父 -->
    <addEmployee :show="show" @close="show = false" />
    <!-- 员工头像二维码弹层 -->
    <el-dialog width="200px" title="头像二维码" :visible.sync="showPhoto">
      <!-- 绘制头像的二维码 -->
      <canvas ref="cv" />
    </el-dialog>
    <!-- 分配角色子组件弹层 -->
    <assignRole ref="roles" :show-role-dialog.sync="showRoleDialog"></assignRole>
  </div>
</template>

<script>
import { getEmployeeListAPI, delEmployeeAPI } from "@/api/employees";
// 导入格式化函数
import EmployeeEnum from "@/api/constant/employees";
// 导入时间格式化
import dayjs from "dayjs";
// 导入子组件弹层
import addEmployee from "./components/add-employee.vue";
// 导入子组件弹层
import assignRole from "./components/assign-role.vue";
// 导入transformTdata方法转换导出的表格数据为二维数组
import { transformTdata } from "@/utils";
// 基本用法
import QrCode from "qrcode";
export default {
  components: {
    addEmployee,
    assignRole,
  },
  data() {
    return {
      // 控制分配角色的弹层显隐
      showRoleDialog: false,
      // 控制头像二维码弹层显隐
      showPhoto: false,
      // 导出loading效果
      downloadLoading: false,
      // 控制弹层的显隐
      show: false,
      // 状态点亮
      qy: true,
      // 定义员工数据
      list: [],
      total: 0, // 总数
      // page: 1, // 当前页
      // 	size: 10 // 每页条数
      params: {
        page: 1,
        size: 10,
      },
    };
  },
  created() {
    this.getEmployees();
  },
  methods: {
    // 点击分配角色和角色弹层
    /**
     * id 员工ID
     */
    openAssign(id) {
      // 打开弹层
      this.showRoleDialog = true;
       // 调用分配角色子组件方法=》数据回填
      // this.$refs.roles === 等价于 分配角色子组件 this
      this.$refs.roles.getRolesById(id)
    },
    // 打开头像二维码弹层并绘制二维码
    openDraw(photoUrl) {
      /**
       * 1. 打开弹层
       * 2. 绘制二维码=》
       * // dom为一个canvas的dom对象， info为转化二维码的信息
         语法：QrCode.toCanvas(dom, info)
       */
      this.showPhoto = true;
      /**
       * 现象：vue修改数据后，dom渲染更新是异步=》提升页面性能
       * 造成问题：不能获取到异步更新的最新dom
       * 解决：this.$nextTick(callback)
       */
      console.log("canvas的dom对象：", this.$refs.cv);
      this.$nextTick(() => {
        console.log("cb-canvas的dom对象：", this.$refs.cv, photoUrl);
        QrCode.toCanvas(this.$refs.cv, photoUrl);
      });
    },
    // 导出员工信息=>下载到本地
    async exportDate() {
      this.downloadLoading = true;
      const excel = await import("@/utils/Export2Excel");
      // excel表示导入的模块对象
      // console.log(excel)
      // 导出数据key对应关系
      const headerShips = {
        手机号: "mobile",
        姓名: "username",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        工号: "workNumber",
        转正日期: "correctionTime",
        部门: "departmentName",
      };
      // 1. 表头
      const header = Object.keys(headerShips);
      // 2. 导出数据项
      const exportHeader = Object.values(headerShips);
      // 3. 表头对应数据（二维数组）
      const data = transformTdata(this.list, exportHeader);
      // 导出方法
      excel.export_json_to_excel({
        // 表头 必填
        header,
        data,
        // 表头对应的具体数据 必填
        // data: [
        //   ['刘备', 100],
        //   ['关羽', 500]
        // ],
        filename: "excel-list", // 导出下载的文件名称
        autoWidth: true, // 导出excel列宽度是否自适应
        bookType: "xlsx", // 导出生成的文件类型
      });
      this.downloadLoading = false;
    },
    // 点击删除
    delFn(date) {
      // console.log("删除", id);
      this.$confirm(`此操作将永久删除, 是否继续?`, "提示")
        .then(async () => {
          await delEmployeeAPI(date.id);
          // 解决删除最后一页数据页码正确，数据显示错误问题
          const newPage = Math.ceil((this.total - 1) / this.params.size); // 总页数
          if (this.params.page > newPage) {
            // 不正确修复，重新赋值
            this.params.page = newPage;
          }
          // 刷新员工列表
          this.getEmployees();
          this.$message.success("删除成功!");
        })
        .catch(() => {
          this.$message("已取消删除");
        });
    },
    // str='默认值' str如果不传 读取默认值'YYYY-MM-DD'
    formatDate(value, str = "YYYY-MM-DD") {
      return dayjs(value).format(str);
    },
    // 格式化聘用形式函数
    formatEmployment(type) {
      // 经过对源数据处理之后 返回处理之后的数据
      // 格式化逻辑
      const hireType = EmployeeEnum.hireType;
      // type 1/2
      // {1:'正式', 2:'非正式'}
      // 枚举静态数据 尽量定义成对象  因为对象天生具有一一对应的属性
      // map 1.'正式' 2.‘非正式’
      const map = {};
      hireType.forEach((item) => {
        // 1.数据id作为属性值2.数据的value作为值
        map[item.id] = item.value;
      });
      return map[type];
    },
    // 页码切换
    changePage(page) {
      this.params.page = page;
      this.getEmployees();
    },

    // 每页显示条数切换
    sizeChange(size) {
      this.params.size = size;
      this.getEmployees();
    },
    // 获取员工列表
    async getEmployees() {
      const { total, rows } = await getEmployeeListAPI(this.params);
      console.log("列表", total, rows);
      this.total = total;
      this.list = rows;
    },
  },
};
</script>

<style lang="scss" scoped>
.employees-container {
  .staff {
    width: 70px;
    height: 70px;
    border-radius: 100%;
  }
}
</style>
